<route lang="json5" type="lineup">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '排队表',
  },
}
</route>
<template>
  <view class="notice_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('home.homeLine') }}</text>
    </view>
    <view class="list_box">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="first_column">
          <text>{{ item.title }}</text>
          <text>{{ item.date }}</text>
        </view>
        <img src="../../static/images/ic_queuing_table_download.png" />
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'Notice',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const dataList = reactive([
  {
    title: 'SINOAGENT-LINE UP(2024-03-28).xlsx',
    date: '2023-10-11 10:01:30',
  },
  {
    title: '交通运输部关于印发《港口及其一线人员新冠等等等等等等等等》',
    date: '2022-12-12 12:49:08',
  },
])
</script>
<style lang="scss" scoped>
.notice_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f9fb;
  .title_box {
    position: relative;
    width: 100vw;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #295699;

    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 26rpx;
      transform: translateY(-50%);
    }
    text {
      color: #fff;
    }
  }
  .list_box {
    background-color: #fff;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 30rpx 12rpx 30rpx;
      border-bottom: 2rpx solid #fcfcfc;
      .first_column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 82%;

        text {
          display: inline-block;
          width: 100%;
          overflow: hidden; /* 隐藏超出的内容 */
          font-size: 28rpx;
          color: #696968;
          text-overflow: ellipsis; /* 显示省略号 */
          white-space: nowrap; /* 不换行 */
          &:nth-child(2) {
            margin-top: 16rpx;
            font-size: 22rpx;
            color: #afafaf;
            text-align: right;
          }
        }
      }

      img {
        width: 36rpx;
      }
    }
  }
}
</style>
